<template>
  <div class="dialog">
    <div class="slider">
      <el-slider
        v-model="value"
        show-input
        :min="min"
        :max="220"
        :show-tooltip="false"
        :show-input-controls="false"
        @change="handleValue">
      </el-slider>
      <el-row :gutter="8">
        <el-col :span="6"><div class="col_box" @click="updateValue">0</div></el-col>
        <el-col :span="6"><div class="col_box" @click="updateValue">10</div></el-col>
        <el-col :span="6"><div class="col_box" @click="updateValue">20</div></el-col>
        <el-col :span="6"><div class="col_box" @click="updateValue">40</div></el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :span="6"><div class="col_box" @click="updateValue">60</div></el-col>
        <el-col :span="6"><div class="col_box" @click="updateValue">100</div></el-col>
        <el-col :span="6"><div class="col_box" @click="updateValue">140</div></el-col>
        <el-col :span="6"><div class="col_box" @click="updateValue">220</div></el-col>
      </el-row>
    </div>
    <div class="border" v-show="borderKey">
      <el-row :gutter="8">
        <el-col :span="5"><el-button type="primary" :class="className === 'dotted' ? 'button':''" size="mini" @click="updateBorderStyle">点状</el-button></el-col>
        <el-col :span="5"><el-button type="primary" :class="className === 'solid' ? 'button':''" size="mini" @click="updateBorderStyle">实线</el-button></el-col>
        <el-col :span="5"><el-button type="primary" :class="className === 'double' ? 'button':''" size="mini" @click="updateBorderStyle">双线</el-button></el-col>
        <el-col :span="5"><el-button type="primary" :class="className === 'dashed' ? 'button':''" size="mini" @click="updateBorderStyle">虚线</el-button></el-col>
        <el-col :span="4"><div class="col_box" ><el-color-picker v-model="color" size="mini" @change="handleBorderColor"></el-color-picker></div></el-col>
      </el-row>
    </div>
    <div class="reset">
      <el-row>
        <el-col :span="12"><div class="num" @click="resetValue"><i class="el-icon-refresh-left"></i>重置</div></el-col>
        <el-col :span="12">Alt + click</el-col>
      </el-row>
      <p>重置将恢复为初始值。</p>
    </div>
  </div>
</template>

<script>

export default {
  name: 'mc-box-dialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: true
    },
    borderKey: {
      type: Boolean,
      default: false
    },
    defaultValue: {
      type: Number,
      default: null
    },
    borderStyle: {
      type: String,
      default: ''
    },
    borderColor: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      value: 0,
      style: '',
      color: '',
      className: '',
      min:0
    }
  },
  methods: {
    open(objKey){
        if(objKey.search("border")!=-1 || objKey.search("padding")!=-1){
          this.min = 0;
        }else{
          this.min = -220;
        }
    },
    handleValue (val) {
      this.$emit('onChange', val)
    },
    updateValue (e) {
      this.value = Number(e.target.innerText)
      this.$emit('onChange', this.value)
    },
    updateBorderStyle (e) {
      var borderStyle = e.target.innerText
      if (borderStyle === '点状') {
        borderStyle = 'dotted'
      } else if (borderStyle === '实线') {
        borderStyle = 'solid'
      } else if (borderStyle === '双线') {
        borderStyle = 'double'
      } else {
        borderStyle = 'dashed'
      }
      if(this.value===0){
        this.value = 1;
      }
      this.style = borderStyle
      this.$emit('onChange', this.value, this.style, this.color)
    },
    handleBorderColor (val) {
      this.color = val
      if(this.value===0){
        this.value = 1;
      }
      this.$emit('onChange', this.value, this.style, val)
    },
    resetValue () {
      this.value = 0
      this.color = ''
      this.className = ''
      this.$emit('onChange', "", '', '')
    }
  },
  watch: {
    defaultValue: function (val) {
      this.value = val
    },
    borderStyle: function (val) {
      this.className = val
    },
    borderColor: function (val) {
      this.color = val
    }
  }
}
</script>

<style lang="scss" scoped>
  .dialog {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #404040;
  z-index: 999;
}
.dialog .slider {
  padding: 0 10px;
  width: calc(100% - 20px);
}
.dialog .slider .el-slider .el-slider__button {
  border: 0;
}
.dialog .slider .el-slider .el-slider__bar {
  background-color: #8c8c8c;
}
.dialog .slider .el-slider .el-slider__runway {
  background-color: #5e5e5e;
}
.dialog .slider .el-slider .el-slider__input {
  width: 80px;
}
.dialog .slider .el-slider .el-slider__input .el-input__inner {
  font-size: 16px;
  color: #f5f5f5;
  background-color: #2b2b2b;
  border: 2px solid #212121;
}
.dialog .slider .el-slider .el-slider__runway.show-input {
  margin-left: 50px;
  margin-right: 100px;
}
.dialog .slider .el-row {
  margin-bottom: 8px;
}
.dialog .slider .el-row .el-col-6 {
  color: #d9d9d9;
  cursor: pointer;
}
.dialog .slider .el-row .el-col-6 .col_box {
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  background-color: #5f5f5f;
}
.dialog .border {
  padding: 0 10px;
}
.dialog .border .el-button {
  background-color: #5e5e5e;
  border-color: #5e5e5e;
}
.dialog .border .el-button:focus,
.dialog .border .el-button:hover {
  background-color: rgba(94, 94, 94, 0.3);
  border-color: rgba(94, 94, 94, 0.3);
}
.dialog .border .button {
  background-color: rgba(46, 46, 46, 0.5);
  border-color: rgba(46, 46, 46, 0.5);
}
.dialog .reset {
  width: 100%;
  text-align: left;
  color: #d8d8d8;
}
.dialog .reset .el-row {
  height: 35px;
  line-height: 35px;
  border: 1px solid #212121;
}
.dialog .reset .el-row .el-col-12 {
  padding: 0 10px;
}
.dialog .reset .el-row .el-col-12:nth-child(1) {
  cursor: pointer;
}
.dialog .reset .el-row .el-col-12:nth-child(2) {
  text-align: right;
}
.dialog .reset .el-row .el-icon-refresh-left {
  margin-right: 10px;
}
.dialog .reset p {
  margin: 5px 0 0 10px;
}

</style>
